<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>WebGL模型页面</title>
    <script type="text/javascript" src="jquery/jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/dat.gui.min.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/three.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/Detector.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/OrbitControls.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/VRMLLoader.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/stats.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .lbl {
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            position: absolute;
            z-index: 100;
            text-shadow: #000 1px 1px 1px;
            background-color: rgba(0, 0, 0, 0.85);
            padding: 1em
        }

        #lbl_tip {
            text-align: left;
        }

        .g {
            color: #aaa
        }

        .c {
            color: #fa0
        }
        .lb {
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            position: absolute;
            right:10px;
            z-index: 100;
            text-shadow: #000 1px 1px 1px;
            background-color: rgba(0, 0, 0, 0.85);
            padding: 1em
        }


    </style>
</head>

<body>
<div id="lbl_tip" class="lbl" style="display: none;">
    <p2 id="sensorNum">传感器编号: <span class="c">001-SDT00-04</span><br/></p2>
    <p2 id="sensorValue">数值: <span class="c">28.5度</span><br/></p2>
</div>
<div id="Stats-output"></div>
<div id="lb" class="lb" >
    <p2 id="x">x轴坐标: <span class="c" id="xaxis">0</span><br/></p2>
    <p2 id="y">y轴坐标: <span class="c" id="yaxis">0</span><br/></p2>
    <p2 id="z">z轴坐标: <span class="c" id="zaxis">0</span><br/></p2>
    <p2 id="rotation">主轴转速: <span class="c">0</span><br/></p2>
    <p2 id="rotation">进给速率: <span class="c">0</span><br/></p2>
    <button id="run" onclick="run()">Run</button>
    <%--<button id="stop" onclick="stop()">Stop</button>--%>
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output"></div>

<script type="text/javascript">
    if (!Detector.webgl) Detector.addGetWebGLMessage();
    var runisactive=1;
    var postionarr=[0,0,0];
    var controls,stats,scene,webGLRenderer,camera,container;
    var zaxis, xaxis, yaxis, maxis, column,sensor,columnaxis,xaxismotion,yaxismotion,timename,raycaster,mouse,posx,posy,posz,locax,locay,locaz;
    var pivot = undefined;
    var pivot1 = undefined;
    var pivoty = undefined;
    var pivotx = undefined;
    init();
    render();

    var wsPath = "<%=webSocketPath%>";
    var webSocket = new WebSocket('ws://' + wsPath + '/websocket/001-POS');
    webSocket.onerror = function (event) {
        onError(event)
    };
    webSocket.onopen = function (event) {
        onOpen(event)
    };
    webSocket.onmessage = function (event) {
        onMessage(event)
    };
    function onMessage(event) {
        console.log(event.data);
        var data = JSON.parse(event.data);
        postionarr = data.value.split(",");
        //坐标统一
        if (postionarr[0] > 0) {
            posx = -(postionarr[0] / 877);
        } else {
            posx = postionarr[0] / 877;
        }
        if (postionarr[1] > 0) {
            posy = -(postionarr[1] / 645);
        } else {
            posy = postionarr[1] / 645;
        }
        if (postionarr[2] > 0) {
            posz = postionarr[2] / 812.5;
        } else {
            posz = -(postionarr[2] / 812.5);
        }
    }
    function onOpen(event) {
        console.log("open")
    }
    function onError(event) {
        alert(event.data);
    }
    function start() {
        webSocket.send('hello');
        return false;
    }

    function init() {
        stats = initStats();                                // 初始化帧数显示插件
        container = document.createElement('div');
        //把上面的层放到body里
        document.body.appendChild(container);
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();
        webGLRenderer = new THREE.WebGLRenderer({antialias: false});      // 生成渲染对象并设置抗锯齿为有效
        webGLRenderer.setClearColor(0xaaaaff, 1.0);                            // 设置canvas背景色(clearColor)
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);     // 指定渲染的宽高
        webGLRenderer.shadowMapEnabled = true;
        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e10);
        camera.position.set(-8, 3, -0.2);
        scene.add(camera);
        controls = new THREE.OrbitControls(camera);                             // 利用当前摄像机建立鼠标控制
        var dirLight = new THREE.DirectionalLight(0xffffff);  //方向光
        dirLight.position.set(130, 150, 1000).normalize();
        camera.add(dirLight);
        camera.add(dirLight.target);
        var objLoader = new THREE.VRMLLoader();
        var totalMd;
        objLoader.load('mintor/model/model.wrl', function (geometry) {
            totalMd = geometry;
            sensor = geometry.children[0];
            xaxismotion = geometry.children[0].children[3];
            yaxis = geometry.children[0].children[3].children[2];
            yaxismotion = geometry.children[0].children[3].children[5];
            zaxis = geometry.children[0].children[3].children[5].children[6];
            maxis = geometry.children[0].children[3].children[5].children[6].children[7];
            column = geometry.children[0].children[3];
            geometry.position.set(0, 0, 0);
            scene.add(geometry);
            container.appendChild(webGLRenderer.domElement);
            container.addEventListener('mousemove', onMouseDownzaxis, false);
        });
    }

    function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        $("#Stats-output").append(stats.domElement);
        return stats;
    }

    function onMouseDownzaxis(event) {
        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2();
        event.preventDefault();                                                    // 禁用事件的默认处理程序
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;                       // 计算鼠标坐标
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);                                   // 设置射线

        //底座传感器检测
        var intersectsx = raycaster.intersectObjects(sensor.children, true);
        var intersectedx;
        if (intersectsx.length > 0) {                                              // 是否拾取到物体
            intersectedx = intersectsx[0].object;
            if (intersectedx) {
                var throughBoxArrayx = intersectsx[0].object.matrixWorld.elements.toString();
                for (var i = 1; i < 31; i++) {
                    if (throughBoxArrayx == sensor.children[0].children[i].children[0].matrixWorld.elements.toString() || throughBoxArrayx == sensor.children[1].children[i].children[0].matrixWorld.elements.toString()) {
                        var xsensor;
                        if (throughBoxArrayx == sensor.children[0].children[i].children[0].matrixWorld.elements.toString()) {
                            xsensor = sensor.children[0].children[i];   //左底座
                        } else {
                            xsensor = sensor.children[1].children[i];   //右底座
                        }
                        container.style.cursor = 'pointer';
                        xsensor.scale.set(3, 1.5, 2);
                        xsensor.children[0].children[0].material.color.set(0xff0000);
                        document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                        document.getElementById("lbl_tip").style.top = event.clientY + "px";
                        document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + xsensor.name + "</span><br/></p3>";
                        document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                        $('#lbl_tip').show();
                        break;
                    } else {
                        sensor.children[0].children[i].scale.set(1, 1, 1);
                        sensor.children[0].children[i].children[0].children[0].material.color.set(0x00ffff);
                        sensor.children[1].children[i].scale.set(1, 1, 1);
                        sensor.children[1].children[i].children[0].children[0].material.color.set(0x00ffff);
                        document.getElementById("lbl_tip").style.display = "none";
                        container.style.cursor = 'auto';
                    }
                }
            }
        }

        //立柱传感器检测
        var intersectsc = raycaster.intersectObjects(column.children, true);
        var intersectedc;
        if (intersectsc.length > 0) {                                              // 是否拾取到物体
            intersectedc = intersectsc[0].object;
            if (intersectedc) {
                var throughBoxArrayc = intersectsc[0].object.matrixWorld.elements.toString();
                for (var i = 1; i < 25; i++) {
                    if (throughBoxArrayc == column.children[3].children[i].children[0].matrixWorld.elements.toString() || throughBoxArrayc == column.children[4].children[i].children[0].matrixWorld.elements.toString()) {
                        var columnsensor;
                        if (throughBoxArrayc == column.children[3].children[i].children[0].matrixWorld.elements.toString()) {
                            columnsensor = column.children[3].children[i];   //右立柱
                        } else {
                            columnsensor = column.children[4].children[i];   //左立柱
                        }
                        container.style.cursor = 'pointer';
                        columnsensor.scale.set(3, 1.5, 2);
                        columnsensor.children[0].children[0].material.color.set(0xff0000);
                        document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                        document.getElementById("lbl_tip").style.top = event.clientY + "px";
                        document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + columnsensor.name + "</span><br/></p3>";
                        document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                        $('#lbl_tip').show();
                        break;
                    } else {
                        column.children[3].children[i].scale.set(1, 1, 1);
                        column.children[3].children[i].children[0].children[0].material.color.set(0x00ffff);
                        column.children[4].children[i].scale.set(1, 1, 1);
                        column.children[4].children[i].children[0].children[0].material.color.set(0x00ffff);
                        document.getElementById("lbl_tip").style.display = "none";
                        container.style.cursor = 'auto';
                    }
                }
            }
        }

        //z轴传感器检测
        var intersects = raycaster.intersectObjects(zaxis.children[6].children, true);
        var intersected;
        if (intersects.length > 0) {                                              // 是否拾取到物体
            intersected = intersects[0].object;
            if (intersected) {
                var throughBoxArray = intersects[0].object.matrixWorld.elements.toString();
                for (var i = 1; i < 91; i++) {
                    var zaxissensor = zaxis.children[6].children[i];
                    if (throughBoxArray == zaxissensor.children[0].matrixWorld.elements.toString()) {
                        container.style.cursor = 'pointer';
                        zaxissensor.scale.set(3, 1.5, 2);
                        zaxissensor.children[0].children[0].material.color.set(0xff0000);
                        document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                        document.getElementById("lbl_tip").style.top = event.clientY + "px";
                        document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + zaxissensor.name + "</span><br/></p3>";
                        document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                        $('#lbl_tip').show();
                        break;
                    } else {
                        container.style.cursor = 'auto';
                        document.getElementById("lbl_tip").style.display = "none";
                        zaxis.children[6].children[i].scale.set(1, 1, 1);
                        zaxis.children[6].children[i].children[0].children[0].material.color.set(0x00ffff);
                    }
                }
            }
        }

        //y轴传感器检测
        var intersectsy = raycaster.intersectObjects(yaxis.children, true);
        var intersectedy;
        if (intersectsy.length > 0) {                                              // 是否拾取到物体
            intersectedy = intersectsy[0].object;
            if (intersectedy) {
                var throughBoxArrayy = intersectsy[0].object.matrixWorld.elements.toString();
                for (var i = 1; i < 21; i++) {
                    if (throughBoxArrayy == yaxis.children[i].children[0].matrixWorld.elements.toString()) {
                        var yaxissensor = yaxis.children[i];
                        container.style.cursor = 'pointer';
                        yaxissensor.scale.set(3, 1.5, 2);
                        yaxissensor.children[0].children[0].material.color.set(0xff0000);
                        document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                        document.getElementById("lbl_tip").style.top = event.clientY + "px";
                        document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + yaxissensor.name + "</span><br/></p3>";
                        document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                        $('#lbl_tip').show();
                        break;
                    } else {
                        yaxis.children[i].scale.set(1, 1, 1);
                        yaxis.children[i].children[0].children[0].material.color.set(0x00ffff);
                        document.getElementById("lbl_tip").style.display = "none";
                        container.style.cursor = 'auto';
                    }
                }
            }
        }


        var intersectsm = raycaster.intersectObjects(maxis.children, true);
        var intersectedm;
        if (intersectsm.length > 0) {                                              // 是否拾取到物体
            intersectedm = intersectsm[0].object;
            if (intersectedm) {
                var throughBoxArraym = intersectsm[0].object.matrixWorld.elements.toString();
                for (var i = 1; i < 25; i++) {
                    if (throughBoxArraym == maxis.children[i].children[0].matrixWorld.elements.toString()) {
                        var maxissensor = maxis.children[i];
                        container.style.cursor = 'pointer';
                        maxissensor.scale.set(3, 1.5, 2);
                        maxissensor.children[0].children[0].material.color.set(0xff0000);
                        document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                        document.getElementById("lbl_tip").style.top = event.clientY + "px";
                        document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + maxissensor.name + "</span><br/></p3>";
                        document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                        $('#lbl_tip').show();
                        break;
                    } else {
                        maxis.children[i].scale.set(1, 1, 1);
                        maxis.children[i].children[0].children[0].material.color.set(0x00ffff);
                        document.getElementById("lbl_tip").style.display = "none";
                        container.style.cursor = 'auto';
                    }
                }
            }
        }

    }

    function render() {
        stats.update();
        /*if(pivot1 != undefined && pivotx != undefined && pivoty != undefined && pivot != undefined){
         pivotx.position.x+=posx;
         pivoty.position.x+=posx;
         pivot.position.x+=posx;
         pivot1.position.x+=posx;
         pivoty.position.z+=posy;
         pivot.position.z+=posy;
         pivot1.position.z+=posy;
         pivot.position.y+=posz;
         pivot1.position.y+=posz;
         pivot1.rotateY(0.01);
         }*/
        requestAnimationFrame(render);
        controls.update();
        webGLRenderer.render(scene, camera);
    }

    function run() {
        runisactive = 1;
        if(pivotx==undefined) {
            pivotx = new THREE.Group();                                      // 新建物体组
            var box = new THREE.Box3().setFromObject(xaxismotion);               // 边界框
            pivotx.add(xaxismotion);                                                 // 将目标块加入组中
            box.getCenter(xaxismotion.position);                                    // 设置盒子中心
            xaxismotion.position.multiplyScalar(-1);                                // 反方向移动
            box.getCenter(pivotx.position);
            scene.add(pivotx);                                                // 将组加入场景中
        }else{
            pivotx=undefined;
        }
        if(pivoty==undefined) {
            pivoty = new THREE.Group();                                      // 新建物体组
            var box = new THREE.Box3().setFromObject(yaxismotion);               // 边界框
            pivoty.add(yaxismotion);                                                 // 将目标块加入组中
            box.getCenter(yaxismotion.position);                                    // 设置盒子中心
            yaxismotion.position.multiplyScalar(-1);                                // 反方向移动
            box.getCenter(pivoty.position);
            scene.add(pivoty);                                                // 将组加入场景中
        }else{
            pivoty=undefined;
        }
        if(pivot==undefined) {
            pivot = new THREE.Group();                                      // 新建物体组
            var box = new THREE.Box3().setFromObject(zaxis);               // 边界框
            pivot.add(zaxis);                                                 // 将目标块加入组中
            box.getCenter(zaxis.position);                                    // 设置盒子中心
            zaxis.position.multiplyScalar(-1);                                // 反方向移动
            box.getCenter(pivot.position);
            scene.add(pivot);                                                // 将组加入场景中
        }else{
            pivot=undefined;
        }
        if(pivot1==undefined) {
            pivot1 = new THREE.Group();                                      // 新建物体组
            var box1 = new THREE.Box3().setFromObject(maxis);               // 边界框
            pivot1.add(maxis);                                                 // 将目标块加入组中
            box1.getCenter(maxis.position);                                    // 设置盒子中心
            maxis.position.multiplyScalar(-1);                                // 反方向移动
            box1.getCenter(pivot1.position);
            scene.add(pivot1);
        }else{
            pivot1=undefined;
        }
        document.getElementById("x").innerHTML = "<p3 id='x'>x轴坐标: <span class='c' id='xaxis'>" + postionarr[0] + "</span><br/></p3>";
        document.getElementById("y").innerHTML = "<p3 id='y'>y轴坐标: <span class='c' id='yaxis'>" + postionarr[1] + "</span><br/></p3>";
        document.getElementById("z").innerHTML = "<p3 id='z'>z轴坐标: <span class='c' id='zaxis'>" + postionarr[2] + "</span><br/></p3>";
        locax=document.getElementById("xaxis").innerHTML;
        locay=document.getElementById("yaxis").innerHTML;
        locaz=document.getElementById("zaxis").innerHTML;
//        document.getElementById("run").disabled=true;
//        document.getElementById("stop").disabled=false;
        var a=document.getElementById("run").innerHTML;
        if(a=="Run"){
            document.getElementById("run").innerHTML="Stop";
        }
        if(a=="Stop"){
            document.getElementById("run").innerHTML="Run";
        }
        timename = setInterval("display();", 100);
    }

    function display() {
        if(pivot1 != undefined && pivotx != undefined && pivoty != undefined && pivot != undefined) {
            document.getElementById("x").innerHTML = "<p3 id='x'>x轴坐标: <span class='c'>" + postionarr[0] + "</span><br/></p3>";
            document.getElementById("y").innerHTML = "<p3 id='y'>y轴坐标: <span class='c'>" + postionarr[1] + "</span><br/></p3>";
            document.getElementById("z").innerHTML = "<p3 id='z'>z轴坐标: <span class='c'>" + postionarr[2] + "</span><br/></p3>";
            if(pivot1 != undefined && pivotx != undefined && pivoty != undefined && pivot != undefined){
                pivotx.position.x+=posx;
                pivoty.position.x+=posx;
                pivot.position.x+=posx;
                pivot1.position.x+=posx;
                pivoty.position.z+=posy;
                pivot.position.z+=posy;
                pivot1.position.z+=posy;
                pivot.position.y+=posz;
                pivot1.position.y+=posz;
                pivot1.rotateY(0.01);
            }
        }
    }




</script>

</body>
</html>